<template>
    <h1>v-for数组数组更新</h1>
    <ul>
        <li v-for="(val, index) in arr">
            {{ val }}
        </li>
    </ul>
    <button @click="revbtn">数组翻转</button>
    <button @click="slicebtn">数组截取前3个</button>
    <button @click="updatebtn">更新第一个元素</button>
    <button @click="filterbtn">过滤数组</button>
    <br>
    <hr>
    <div class="content">
        <p>学生的姓名</p>
        <ul>
            <!--让那个标签循环读取数据 就在哪个标签上 加上v-for指令-->
            <li v-for="(item, index) in stuarr" :key="index">
                {{ item }} -- {{ index }}
            </li>
        </ul>
        <p>学生的信息</p>
        <ul>
            <li v-for="obj in arrinfo" :key="obj.id">
                <span>{{ obj.name }}</span> >
                <span>{{ obj.sex }}</span> >
                <span>{{ obj.hobby }}</span>
            </li>
        </ul>
        <p>老师的个人信息</p>
        <div v-for="(value, key) in tearr" :key="key">

            {{ key }} -- {{ value }}
        </div>
    </div>

</template>
<script>
export default {
    data() {
        return {
            arr: [1, 2, 3, 4, 5],
            stuarr: ["白小纯", "萧炎", "唐三", "小舞"],
            arrinfo: [
                {
                    id: 1,
                    name: '萧炎',
                    sex: '男',
                    hobby: '炼丹'
                },
                {
                    id: 2,
                    name: '美杜莎',
                    sex: '女',
                    hobby: '萧炎'
                },
                {
                    id: 3,
                    name: '小医仙',
                    sex: '女',
                    hobby: '萧炎'
                }
            ],
            tearr: {
                name: "药老",
                age: 250,
                class: "药尊"
            }
        }
    },
    methods: {
        revbtn() {
            //数组翻转
            this.arr.reverse();
        },
        slicebtn() {
            //数组截取前3个
            // var newArr = this.arr.slice(0, 3)
            // slice()方法返回一个新的数组， 那么就不会对源数组直接更新 ，包含从 start 到 end 。
            this.arr = this.arr.slice(0, 3)
            console.log(this.arr.slice(0, 3));

        },
        updatebtn() {
            //更新第一个元素 根据下标更新是能直接更新整个数组
            //this.arr[0] = "白小纯"
            //拼接数组
            var newArr = this.arr.concat(this.stuarr)
            console.log(newArr);
            this.arr = newArr
        },
        filterbtn() {
            //过滤数组取出条允许的数据
            var newArr = this.arr.filter(item => item >= 3);
            /**
             * filter(function(val, index, arr)
             * val : 当前数组的值
             * index : 当前数组的索引
             * arr : 当前源数组
             */
          var arri=  this.arr.filter((val, index, arr) => {
                return val >= 3
            })
            console.log(newArr);
            console.log(arri);
            this.arr = newArr

        }
    }
}

</script>